﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可视化报表系统</title>
    <link href="~/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="~/css/main.min.css" asp-append-version="true" rel="stylesheet" />
    <script src="~/js/Th/echarts.min.js"></script>
    <link href="~/css/thcss/style.css" type="text/css" media="all" rel="stylesheet" />
</head>
<body>
    <div class="main">
        <div class="nav">
            <div class="nav-header">
                <a href="@Url.Action("Index", "Home")" class="nav-header-brand">
                </a>
            </div>
            <div class="nav-time">
                <span title="菜单">
                    <i class="layui-icon layui-icon-shrink-right"></i>
                </span>
                <span title="全屏">
                    <i class="layui-icon layui-icon-screen-full"></i>
                </span>
                <span>
                    <i class="layui-icon layui-icon-user"></i>
                    @User.Identity.Name !
                </span>
                <span>
                    当前时间：@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")
                </span>
            </div>
            <div class="nav-title">
                <p class="tith1" align="center">报表</p>
            </div>
            <div class="nav-menu layui-hide">
                <div class="user">
                    <p>@User.Identity.Name !</p>
                    <p>
                        <a class="layui-btn layui-btn-primary" href="@Url.Action("Index", "Home")">上一页</a>
                        <a class="layui-btn layui-btn-primary" href="@Url.Action("SeReport", "Home")">下一页</a>
                    </p>
                    <p>
                        <a class="layui-btn layui-btn-primary" href="@Url.Action("Back", "Home")">进入后台</a>
                        <a class="layui-btn layui-btn-primary" href="@Url.Action("Logout", "Account")">安全退出</a>
                    </p>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>主题切换</legend>
                </fieldset>
                <div class="theme">
                    <div class="layui-row"></div>
                </div>
            </div>
        </div>
        <div class="content">
            @*style="margin-top:50px"*@
            <div class="left1">
                <div class="aleftboxttop">
                    <h2 class="tith2">今日数据统计</h2>
                    <div class="lefttoday_tit" style=" height:8%"><p class="fl">产线：黄光</p><p class="fr">2020-04-08</p></div>
                    <div class="lefttoday_number">
                        <div class="widget-inline-box text-center fl">
                            <p>总批数</p>
                            <h3 class="ceeb1fd">54</h3>
                            <h4 class="text-muted pt6">环比<img src="~/imgs/th/iconup.png" height="16" />2%</h4>
                        </div>
                        <div class="widget-inline-box text-center fl">
                            <p>已调节</p>
                            <h3 class="c24c9ff">54</h3>
                            <h4 class="text-muted pt6">环比<img src="~/imgs/th/icondown.png" height="16" />3%</h4>
                        </div>
                        <div class="widget-inline-box text-center fl">
                            <p>未调节</p>
                            <h3 class="cffff00">4</h3>
                            <h4 class="text-muted pt6">环比<img src="~/imgs/th/icondown.png" height="16" />3%</h4>
                        </div>
                        <div class="widget-inline-box text-center fl">
                            <p>处理中</p>
                            <h3 class="c11e2dd">4</h3>
                            <h4 class="text-muted pt6">环比<img src="~/imgs/th/icondown.png" height="16" />3%</h4>
                        </div>
                    </div>
                    <!-- lefttoday_number end -->
                </div>
                <div class="aleftboxtmidd">
                    <h2 class="tith2">产量批次统计</h2>
                    <div class="lefttoday_tit height ht"><p class="fl">状态：已调节</p><p class="fr">时间段：2020-04-01 至 2020-04-08</p></div>
                    <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
                </div>
                <div class="aleftboxtbott">
                    <h2 class="tith2">产量数量类型统计</h2>
                    <div class="lefttoday_tit height"><p class="fl">状态：已调节</p><p class="fr">时间段：2020-04-01 至 2020-04-08</p></div>
                    <div id="aleftboxtbott" class="aleftboxtbott_cont"></div>
                </div>
            </div>
            <!--  left1 end -->
            <div class="mrbox">
                <div class="mrbox_topmidd" style="width: 69%;">
                    <div class="amiddboxttop">
                        @*<div class="data">
            <p class="time" id="time">00:00:00</p>
            <p id="date"></p>
        </div>*@
                        <video autoplay="autoplay" loop="loop" class="dataAllBorder02 video_cage">
                            <source class="video" title="主监控位" src="~/video/test_mv02.mov">
                        </video>
                    </div>
                    <!--  amiddboxttop end-->
                    <div class="amidd_bott">
                        <div class="amiddboxtbott1 fl">
                            <h2 class="tith2 pt1">批次环比分析</h2>
                            <div id="amiddboxtbott1" class="amiddboxtbott1content"></div>
                        </div>

                        <div class="amiddboxtbott2 fl">
                            <h2 class="tith2 pt1">批次统计</h2>
                            <div id="amiddboxtbott2" class="amiddboxtbott2content"></div>
                        </div>
                    </div>
                    <!-- amidd_bott end -->
                </div>
                <!-- mrbox_top end -->
                <div class="mrbox_top_right">
                    <div class="arightboxtop">
                        <h2 class="tith2">机台问题分析</h2>
                        <div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2020-04-08</p></div>
                        <div class="left2_table">
                            <ul id="Listxx">
                                <li>
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>
                                <li class="bg">
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动。<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>
                                <li>
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动。<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>
                                <li class="bg">
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动。<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>
                                <li>
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动。<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>
                                <li class="bg">
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动。<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>
                                <li>
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动。<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>
                                <li class="bg">
                                    <p class="fl">
                                        <b>Aoi</b><br>
                                        机台出现问题，切手动。<br>
                                    </p>
                                    <p class="fr pt17">2020-04-08</p>
                                </li>

                            </ul>
                        </div>

                    </div>
                    <div class="arightboxbott">
                        <h2 class="tith2 ">机台问题七日数据分析</h2>
                        <div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间：2020-04-08</p></div>
                        <div id="arightboxbott" class="arightboxbottcont" style=""></div>
                    </div>
                </div>
                <!-- mrbox_top_right end -->
            </div>
        </div>

    </div>
    <script src="~/js/jquery-2.1.1.min.js"></script>
    <script src="~/js/echarts.min.js"></script>
    <script src="~/js/mSlider.min.js"></script>
    <script type="text/javascript">

        //document.getElementById("time").innerHTML = "时间";
        //var time = document.getElementById('time');
        //time = new Date();
    </script>
    <script src="~/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        setInterval("NewRe()", 4000);
        function NewRe() {
            var myChart = echarts.init(document.getElementById('aleftboxtmidd'));

            var params = {
                "s1": "",
                "s2": ""
            };
            var arr = [];
            $.ajax({
                type: "post",
                async: false, //同步执行
                url: "/Home/OnReport",
                data: params,
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result) {
                        var jsonObj = $.parseJSON(result);
                        for (var i = 0; i < jsonObj.length; i++) {
                            var obj = new Object();
                            obj.name = jsonObj[i].name;
                            obj.value = jsonObj[i].value;
                            arr.push(obj);
                        }
                    }

                },
                error: function (errorMsg) {
                    alert("不好意思，图表请求数据失败啦!");
                    myChart.hideLoading();
                }
            });
            option = {
                color: ['#76c4bf', '#e5ffc7', '#508097', '#4d72d9'],
                backgroundColor: 'rgba(1,202,        217,.2)',
                grid: {
                    left: 10,
                    right: 40,
                    top: 20,
                    bottom: 0,
                    containLabel: true
                },
                calculable: true,
                series: [
                    {
                        name: '面积模式',
                        type: 'pie',
                        radius: [5, 60],
                        center: ['50%', '55%'],
                        roseType: 'area',
                        data: arr
                    }
                ]
            };
            myChart.setOption(option);
        }
    </script>
    <script type="text/javascript">
        setInterval("NewRe1()", 4000);
        function NewRe1() {
            var myChart = echarts.init(document.getElementById('aleftboxtbott'));
            var params = {
                "s1": ""
            };
            var arr = [];
            $.ajax({
                type: "post",
                async: false, //同步执行
                url: "/Home/OnReport1",
                data: params,
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result) {
                        var jsonObj = $.parseJSON(result);
                        for (var i = 0; i < jsonObj.length; i++) {
                            var obj = new Object();
                            obj.value = jsonObj[i].value;
                            arr.push(obj);
                        }
                    }

                },
                error: function (errorMsg) {
                    alert("不好意思，图表请求数据失败啦!");
                    myChart.hideLoading();
                }
            });

            option = {
                color: ['#7ecef4'],
                backgroundColor: 'rgba(1,202,217,.2)',
                grid: {
                    left: 20,
                    right: 20,
                    top: 13,
                    bottom: 6,
                    containLabel: true
                },

                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0)'
                        }
                    },
                    axisLabel: {
                        color: "rgba(255,255,255,0)"
                    },
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.5)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: "rgba(255,255,255,.5)"
                    },
                    data: ['未调节', '调节中', '未调节']
                },
                series: [
                    {
                        name: '2011年',
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    1, 0, 0, 1,
                                    [
                                        { offset: 0, color: 'rgba(230,253,139,.7)' },
                                        { offset: 1, color: 'rgba(41,220,205,.7)' }
                                    ]
                                )
                            }
                        },
                        data: arr
                    }
                ]
            };
            myChart.setOption(option);

        }
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('amiddboxtbott1'));
        var data = [
            [[28604, 77, 17099, 'Australia', 1990], [31163, 77.4, 2440, 'Canada', 1990], [1516, 68, 1605773, 'China', 1990], [13670, 74.7, 10082, 'Cuba', 1990], [28599, 75, 49805, 'Finland', 1990], [29476, 77.1, 569499, 'France', 1990], [31476, 75.4, 789237, 'Germany', 1990], [28666, 78.1, 254830, 'Iceland', 1990], [1777, 57.7, 870776, 'India', 1990], [29550, 79.1, 129285, 'Japan', 1990], [2076, 67.9, 201954, 'North Korea', 1990], [12087, 72, 42954, 'South Korea', 1990], [24021, 75.4, 33934, 'New Zealand', 1990], [43296, 76.8, 4240375, 'Norway', 1990], [10088, 70.8, 381958, 'Poland', 1990], [19349, 69.6, 1475652, 'Russia', 1990], [10670, 67.3, 53905, 'Turkey', 1990], [26424, 75.7, 57117, 'United Kingdom', 1990], [37062, 75.4, 252810, 'United States', 1990]],
            [[44056, 81.8, 23973, 'Australia', 2015], [43294, 81.7, 35927, 'Canada', 2015], [13334, 76.9, 1376043, 'China', 2015], [21291, 78.5, 11562, 'Cuba', 2015], [38923, 80.8, 55057, 'Finland', 2015], [37599, 81.9, 64345, 'France', 2015], [44053, 81.1, 80545, 'Germany', 2015], [42182, 82.8, 329425, 'Iceland', 2015], [5903, 66.8, 1311027, 'India', 2015], [36162, 83.5, 126571, 'Japan', 2015], [1390, 71.4, 251317, 'North Korea', 2015], [34644, 80.7, 503439, 'South Korea', 2015], [34186, 80.6, 4528526, 'New Zealand', 2015], [64304, 81.6, 5210967, 'Norway', 2015], [24787, 77.3, 386194, 'Poland', 2015], [23038, 73.13, 143918, 'Russia', 2015], [19360, 76.5, 78630, 'Turkey', 2015], [38225, 81.4, 64715810, 'United Kingdom', 2015], [53354, 79.1, 321771, 'United States', 2015]]
        ];

        option = {
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 40,
                right: 40,
                top: 50,
                bottom: 40
            },
            title: {
                top: 5,
                left: 20,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.6)'
                },
                text: '环比类型：日环比'
            },
            legend: {
                right: 10,
                top: 5,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.6)'
                },
                data: ['1990', '2015']
            },
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                }
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                scale: true
            },
            series: [{
                name: '1990',
                data: data[0],
                type: 'scatter',
                symbolSize: function (data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                label: {
                    emphasis: {
                        show: true,
                        formatter: function (param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(251, 118, 123)'
                        }, {
                            offset: 1,
                            color: 'rgb(204, 46, 72)'
                        }])
                    }
                }
            }, {
                name: '2015',
                data: data[1],
                type: 'scatter',
                symbolSize: function (data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                label: {
                    emphasis: {
                        show: true,
                        formatter: function (param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(25, 100, 150, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(129, 227, 238)'
                        }, {
                            offset: 1,
                            color: 'rgb(25, 183, 207)'
                        }])
                    }
                }
            }]
        };
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('amiddboxtbott2'));
        option = {
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 60,
                right: 60,
                top: 50,
                bottom: 40
            },

            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['2017年', '2018年', '同比增速']
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: "rgba(255,255,255,.7)"
                    },

                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.3)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.01)'
                        }
                    },

                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '',
                    max: 25,
                    interval: 5,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.3)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [

                {
                    name: '2017年',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#b266ff' },
                                    { offset: 1, color: '#121b87' }
                                ]
                            )
                        }
                    },
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '2018年',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#00f0ff' },
                                    { offset: 1, color: '#032a72' }
                                ]
                            )
                        }
                    },
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name: '同比增速',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#fffb34' },
                                    { offset: 1, color: '#fffb34' }
                                ]
                            )
                        }
                    },
                    yAxisIndex: 1,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('arightboxbott'));
        option = {
            color: ['#7de494', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
            backgroundColor: 'rgba(1,202,217,.2)',

            grid: {
                left: '5%',
                right: '8%',
                bottom: '7%',
                top: '8%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                data: ['6-08', '6-09', '6-10', '6-11', '6-12', '6-13', '6-14']
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
            },
            series: [
                {
                    name: '2014年',
                    type: 'line',
                    stack: '总量',
                    areaStyle: { normal: {} },
                    data: [120, 132, 101, 134, 90, 230, 210]
                }

            ]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        setInterval("get_all_category_with_id()", 2000);
        function get_all_category_with_id() {
            $.ajax({
                type: "get",
                url: "/Home/GetOnReport",
                async: false,
                dataType: "json",
                success: function (result) {
                    var jsonObj = $.parseJSON(result);
                    var str = "";
                    for (var i = 0; i < jsonObj.length; i++) {
                        if (i % 2 == 1) { str += '<li class="bg"><p class="fl"><b>Aoi</b><br>' + jsonObj[i].value + '<br></p><p class="fr pt17">' + jsonObj[i].date + '</p></li>'; }
                        else { str += '<li>           <p class="fl"><b>Aoi</b><br>' + jsonObj[i].value + '<br></p><p class="fr pt17">' + jsonObj[i].date + '</p></li>'; }
                    }
                    //将html动态拼接到对应的div上面
                    $('#Listxx').html(str);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("请求失败！" + XMLHttpRequest + "===" + textStatus + "===" + errorThrown);
                }
            });
        }
    </script>
    <script src="~/js/Report.min.js" asp-append-version="true"></script>
    @if ((await AuthorizationService.AuthorizeAsync(User, null, new PermissionAuthorizationRequirement(IntelligentMonitor.Authorization.Permissions.UserEditor))).Succeeded)
    {
        <script src="~/js/jquery.dad.min.js"></script> 
        <script>
            $('.content .layui-row').dad();
        </script>
    }
</body>
</html>